<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="22">
          <el-form-item label="二级机构" prop="departmentOrgId"  class="item">
            <span>{{form.departmentOrgName}}</span>
          </el-form-item>
        </el-col>
    </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请建设周期" prop="constructionCycle"  class="item">
            <span>{{form.constructionCycle}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="申请经费" prop="budgetFunds"  class="item">
            <span>{{form.budgetFunds}}万元</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="负责人姓名" class="item" >
            <span>{{form.projectLeader}}</span>
            </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="负责人职称" class="item" >
          <span>{{form.ownerTitle}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人电话" class="item" >
          <span>{{form.ownerPhone}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="负责人邮箱" class="item" >
          <span>{{form.ownerEmail}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="场地位置" class="item" >
          <span>{{form.siteLocation}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="学院排序" class="item" >
          <span>{{form.collegeSorting}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="建设内容" class="item" >
          <span>{{form.constructionContent}}</span>
          </el-form-item>
        </el-col>
     </el-row>
    </el-form>
  </div>
</template>
<script>
import {searchEmployee} from "@/api/labdata/employee";
import {treeselect } from "@/api/labdata/orgnization";
import Treeselect from "@riophae/vue-treeselect";
import {getOrgName} from "@/api/labdata/orgnization";
import {listEmployee} from "@/api/labdata/employee";
  export default {
    name: "ProjectConstructionDetail",
    components:{Treeselect},
    data() {
      return {
        //部门列表
        deptList:[],
        // 部门树选项
        deptOptions: [],
       //员工列表
       userList: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectOwnerId: [
          { required: true, message: "工(学)号不能为空", trigger: "blur" }
        ],
        ownerPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        siteLocation: [
          { required: true, message: "实验室场地位置不能为空", trigger: "blur" }
        ],
        ownerEmail: [
         { required: true, message: '请输入邮箱地址', trigger: 'blur' },
         { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        constructionContent: [
        { required: true, message: "主要建设内容不能为空", trigger: "blur" }
        ]

        }
      };
    },
    props:{
      construction:Object,
    },
    created() {
      //this.getDeptList();
      // this.getTreeselect();
      if(this.construction){
        this.form = this.construction;
        this.searchUser();
        this.getDeptName();
      }else{
        this.form  = {};
      }
    },
    methods: {
      getConstruction(){
        return this.form;
      },
      getDeptName(){
        getOrgName(this.form.departmentOrgId).then(response=>{
          this.form.departmentOrgName = response.msg;
          this.$forceUpdate();
        });
      },
        /** 查询部门列表 */
       // 输入工号搜索
       searchUser(){
        if(!this.form.projectOwnerId){
          this.form.projectLeader = null;
          this.form.ownerTitle = null;
          return;
        }
         searchEmployee(this.form.projectOwnerId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectLeader = searchResult.nickName;
             this.form.ownerTitle =searchResult.title
           }else{
             this.form.projectLeader = null;
             this.form.ownerTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });
      },

    }

  };
</script>
<style type="text/css"  scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .table_button {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
</style>
